<template>
  <div class="sidebarCheck" style="height:100%;overflow:hidden;">
    <div :style="{height: setHeight}"></div>
    <a-tabs @change="callback" type="card" size="small" :tabBarGutter="5">
      <a-tab-pane tab="部门列表" key="1">
        <div style="position: relative;padding-top: 40px;">
          <div style="padding: 0 10px;position: absolute;height:40px;left:0;top:0px;width: 100%; ">
            <a-input-search  placeholder="请输入关键字" @search="searchDept"/>
          </div>
          <div :style="heightTree" style="overflow:auto;">
            <div style="padding: 0 10px;">
              <a-tree
                :size="'small'"
                :checkable= true
                :treeData="deptTree"
                @check="onCheck"
                @select="onSelect"
                :checkStrictly="false"
                :checkedKeys="checked"
                :selectedKeys="selected"
                :expandedKeys="iExpandedKeys"
                :autoExpandParent="autoExpandParent"
                :replace-fields="replaceFields"
                @expand="onExpand"
              >

                <template slot="title" slot-scope="{ title }">
                    <span v-if="title.indexOf(searchValue) > -1" @click="clickTtle(title)" class="aaaa">
                      {{ title.substr(0, title.indexOf(searchValue)) }}
                      <span style="color: #f50">{{ searchValue }}</span>
                      {{ title.substr(title.indexOf(searchValue) + searchValue.length) }}
                    </span>
                    <span v-else @click="clickTtle(title)"  class="bbbb">{{ title }}</span>
                  </template>

              </a-tree>
            </div>
          </div>
        </div>
      </a-tab-pane>
      <a-tab-pane tab="人员列表" key="2" >
        <div style="padding: 0 10px;">
          <a-input-search
            placeholder="请输入工号或姓名查询"
            style="margin:0px 0px 10px 0px;"
            @search="handleQuery"
            v-model="searchName"
          />
        </div>
        <div>
        <a-table
          bordered
          size="small"
          class="table11"
          :scroll="{y: parseInt(heightTable)}"
          :rowKey="(record) => record.userSerial"
          :columns="columns"
          :loading="loading"
          :dataSource="userList"
          :pagination="pagination"
          :rowSelection="{selectedRowKeys: userSerialChecked2, onChange: onChange}"
        />
        </div>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>
<script>
// import deptTree from "@/components/common/deptTree.vue";
import dept from "@/api/accessControlSystem/dept";
import user from "@/api/accessControlSystem/user";

export default {
  props: {
    deptChecked: Array,
    userChecked: Array,
    userSerialChecked: Array,
    heightTree: String,
    heightTable: String,
    setHeight: {
      type: String,
      default: "4px"
    },
  },
  components: {

  },
  data() {
    let _this = this;
    return {
      //替换树节点属性名
      replaceFields: {
        key: 'id',
      },
      searchValue:"",
      autoExpandParent: true, //是否自动展开父节点
      checked: [],
      selected: [],
      iExpandedKeys:[],
      deptTree: [],
      // 人员表格
      loading: false,
      searchName: "",
      userList: [],
      userChecked2: [],
      userSerialChecked2: [],
      columns: [
        { title: "工号", dataIndex: "userNo", align: "center", width: "auto",ellipsis: true,className: 'changeBack' },
        { title: "姓名", dataIndex: "userName", align: "center", width: "auto",ellipsis: true,className: 'changeBack' },
      ], //表格表头
      pagination: {
        simple: true,
        size: "small",
        current: 1,
        pageSize: 20, // 默认每页显示数量
        total: 0, //总条数
        // showSizeChanger: true, // 显示可改变每页数量
        // pageSizeOptions: [ "20", "30", "50"], // 每页数量选项
        //showTotal: total => `共 ${total} 条数据`, // 显示总数
        //onShowSizeChange: (current, pageSize) => _this.changePage(1, pageSize), // 改变每页数量时更新显示
        onChange: (current, pageSize) => _this.changePage(current, pageSize) //点击页码事件
      }
    };
  },
  mounted() {
    let _this = this;
    //加载树形结构数据
    dept.getTreeList().then(res => {
      // console.log(res);
      if (res.data.success) {
        _this.deptTree = res.data.result;
        // console.log(_this.deptTree);
        if (_this.deptTree != "") {
          _this.iExpandedKeys = [_this.deptTree[0].id];
        }
      } else {
        _this.$message.error(res.data.message);
      }

    });

  },
  computed: {
    deptCheckedComputed: {
      get: function() {
        return this.deptChecked;
      },
      set: function(value) {
        this.$emit("update:deptChecked", value);
      }
    },
    userCheckedComputed: {
      get: function() {
        return this.userChecked;
      },
      set: function(value) {
        this.$emit("update:userChecked", value);
      }
    },
    userSerialCheckedComputed: {
      get: function() {
        return this.userSerialChecked;
      },
      set: function(value) {
        this.$emit("update:userSerialChecked", value);
      }
    }
  },
  methods: {
    getUserList() {
      let _this = this;
      //根据房间请求空床位数据
      let newArry = [];
      // console.log(_this.checked)
      newArry = newArry.concat(_this.checked);
      newArry = newArry.concat(_this.selected);
      this.loading = true;
      user
        .getUserList({
          current: this.pagination.current,
          pageSize: this.pagination.pageSize,
          deptSerial: newArry.join(","),
          searchName: this.searchName
        })
        .then(function(res) {
          // console.log(res)
          if (res.data.success) {
            _this.loading = false;
            _this.userList = res.data.result;
            _this.pagination.total = res.data.result.length;
          } else {
            _this.loading = false;
            _this.$message.error(res.data.message);
          }
        });
    },
    //分页查询信息
    changePage(current, pageSize) {
      this.pagination.current = current;
      this.pagination.pageSize = pageSize;
      this.getUserList();
    },
    //选择面板
    callback(key) {
      if (key == 2) {
        this.changePage(1, this.pagination.pageSize);

        // let minHeight = document.getElementsByClassName("ant-table");
        // console.log(minHeight[0]);
        // minHeight[0].style.minHeight = parseInt(this.heightTable) + 40 + "px";

      }
      this.$emit("update:tabChecked", key);
      this.userChecked2 = []; //清空选中的人员
      this.userSerialChecked2 = []; //清空选中的人员
      this.userCheckedComputed = []; //清空选中的人员
      this.userSerialCheckedComputed = []; //清空选中的人员
    },

    //搜索人员
    handleQuery() {
      this.changePage(1, this.pagination.pageSize);
      this.userChecked2 = []; //清空选中的人员
      this.userSerialChecked2 = []; //清空选中的人员
      this.userCheckedComputed = []; //清空选中的人员
      this.userSerialCheckedComputed = []; //清空选中的人员
    },
    checkExist(arr, userSerial) {
      var ret3 = arr.findIndex((value, index, arr) => {
        return value.userSerial === userSerial;
      });
      return ret3 >= 0;
    },
    //选择人员
    onChange(selectedKey, selectedRow) {
      var _this = this;
      // this.userChecked2.push(b);
      // let intersection = Array.from(new Set(a.filter(v => bSet.has(v))))
      // console.log(selectedKey);
      // console.log(selectedRow);


      if (this.userChecked2.length == 0) {
        this.userChecked2.push(selectedRow[0]);
      } else {
        selectedKey.forEach((val, index, arr) => {
          var isExist = _this.userChecked2.findIndex((v2, idx2, arr2) => {
            return v2.userSerial === val;
          });

          if (isExist < 0) {
            // delete this.userChecked2[index];
            //console.log('index----'+index);

            var obj = selectedRow.find((v3, idx3, arr3) => {
              return v3.userSerial === val;
            });
            //console.log('selectedRow-------'+obj);
            if (obj) {
              _this.userChecked2.push(obj);
            }
          }
        });

        _this.userChecked2.forEach((val, index, arr) => {
          var isExist = selectedKey.findIndex((value, index, arr) => {
            return val.userSerial === value;
          });
          if (isExist < 0) {
            // delete _this.userChecked2[index];
            _this.userChecked2.splice(index, 1);
          }
        });
      }
      //console.log("all");
      this.userSerialChecked2 = selectedKey;
      this.userSerialCheckedComputed = selectedKey;
      this.userCheckedComputed = this.userChecked2;

    },

    // 查询部门
     searchDept(value) {
       this.onSearch(value)
    },
    //树形选中勾选
    onCheck(checked) {
      // console.log(checked)
      this.$emit("update:checked", checked);
      this.$emit("on-check", checked);
      this.checked = checked;
      // console.log(checked);
      // console.log(this.selected);
      this.selected = [];
      // console.log(this.selected);
    },
    // 树形选择点选
    onSelect(selectedKeys, info) {
      this.$emit("update:selected", selectedKeys);
      this.$emit("on-select", selectedKeys);
      this.$emit("on-select-info", info);
      this.selected = selectedKeys;
      // console.log( selectedKeys);

      this.checked = [];

    },

        // 用监听事件监听serchValue得值，有变化就执行onSearch方法
    async onSearch(value) {
      let that = this;
    //根据value过滤树节点符合搜索值得节点，返回相应id数组，赋值给iExpandedKeys
      let keys = await dept.searchDeptByKey({ key: value });
    // console.log(keys.data.result)
      if (keys.data.success) {
        that.iExpandedKeys = keys.data.result;
        that.autoExpandParent = true;
        that.searchValue = value;
      }
    },
    onExpand(expandedKeys) {
      this.iExpandedKeys = expandedKeys;
      this.autoExpandParent = false;
    },
    clickTtle(val){
      console.log(val)
    },

  }
};
//
</script>

<style scoped>
/*布局*/
.ant-tabs-bar {
  margin: 0 0 10px 0;
}
</style>
